/**
 * 文档作者: wj
 * 创建时间：2018年05月06日
 * 修改时间：2018年05月06日
 * 描述信息：手机认证界面
 */
import React, {Component} from 'react';
import './certified.scss';
import userModel from '../api/user.model';
import util from '../../util/util';

class Certified extends Component {
    constructor(props) {
        super(props);
        this.state = {
            time: 60,
            isTiming: false
        }
        this.hasTiming = false;
        // 获取设备信息
        this.u = window.navigator;
        this.radio = '1'
    }
    render() {
        return <div className='certified-component page top-center'>
            <img src={require('../../assets/img/certified.png')} alt='logo'/>
            <div className='content'>
                <div className='model main'>
                    <label>手机号码</label>
                    <input ref='phone' className='phone num inp' type='number' />
                </div>
                <div className='model main'>
                    <label>验&nbsp;证&nbsp;码</label>
                    <input ref='certified' className='num certified inp' type='text' />
                    <button className='obtain' disabled={this.state.isTiming} onClick={this.obtain.bind(this)}>
                        {this.state.isTiming ? `${this.state.time}` : '获取'}
                    </button>
                </div>
                <div className='model'>
                    <label>尊&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</label>
                    <input className='radio' name='name' type="radio" value='1' onClick={this.onRadio.bind(this, '1')} defaultChecked="checked"/><label className='radio'>先生</label>
                    <input className='radio' name='name' type="radio" value='2' onClick={this.onRadio.bind(this, '2')}/><label className='radio'>女士</label>
                </div>
                <button onClick={this.submit.bind(this)} className='submit'>点击绑定</button>
            </div>
        </div>
    }

    componentDidMount() {
        util.setTitle('认证');
      }

      onRadio(value) {
          this.radio = value;
      }

    /**
     * 计时
     */
    timing() {
        if (this.state.time === 0) {
            this.setState({
                time: 60,
                isTiming: false
            })
            this.hasTiming = false;
        } else {
            this.setState({
                time: this.state.time - 1,
                isTiming: true
            })
        }
        if (this.hasTiming) {
            setTimeout(() => {
                this.timing();
            }, 1000);
        }
        
    }

    /**
     * 获取验证码
     */
    obtain() {
        const phone = this.refs.phone.value;
        const info = util.verification(phone);
        if (info !== '') {
            window.$message.next({info: 'error', content: info});
        } else {
            this.hasTiming = true;
            this.timing();
            window.$http.post(`${window.$apiUrl}/svcBase/svcGetSms`, {
                cellno: phone
            }).then((res) => {})
        }
    }

    /** 绑定 */
    submit() {
        const phone = this.refs.phone.value,
            certified = this.refs.certified.value,
            info = util.verification(phone);
        if (info !== '') {
            window.$message.next({info: 'error', content: info});
            return false;
        } else if (certified === '') {
            window.$message.next({info: 'error', content: '验证码不能为空'});
            return false;
        }
        const obj = {
            cellno: phone,  
            uid: userModel.svcRegWithWx.uid,
            apptoken: userModel.svcRegWithWx.apptoken,
            sms_code: certified,
        }
         
        window.$http.post(`${window.$apiUrl}/svcBase/svcVerifySms`, obj)
            .then((res) => {
                if (res.data.res !== 1) {
                    window.$message.next({info: 'error', content: res.data.info.msg});
                } else {
                    window.$http.post(`${window.$apiUrl}/svcBusiUser/svcUpdateUserInfo`, {
                        uid: userModel.svcRegWithWx.uid,
                        apptoken: userModel.svcRegWithWx.apptoken,
                        upobj: [
                            {
                                fd: 'cellno',
                                fd_val: phone
                            },
                            {
                                fd: 'sex',
                                fd_val: Number(this.radio)
                            }
                        ]
                    }).then(res => {
                        if (res.data.res !==1) {
                            window.$message.next({info: 'error', content: res.data.info.msg});
                        } else {
                            window.$http.post(`${window.$apiUrl}/svcBusiUser/svcLoadUserInfo`, {
                                uid: userModel.svcRegWithWx.uid,
                                apptoken: userModel.svcRegWithWx.apptoken,
                              }).then((res) => {
                                if (res.data.res !==1) {
                                    window.$message.next({info: 'error', content: res.data.info.msg});
                                } else {
                                    userModel.svcRegWithWx = res.data.info;
                                    util.setCookie('$mall', res.data.info);                                    
                                    this.props.history.goBack();
                                }
                              })
                        }
                    })
                }
            })
    }
}

export default Certified;